﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width,  target-densitydpi=medium-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow test</title>
<style type="text/css">
	html,body,p { margin:0; padding:0; }
	.wrapper { height:1500px; 
		background-image: -webkit-gradient(
		    linear,
		    left bottom,
		    left top,
		    color-stop(0.1, rgb(255,0,234)),
		    color-stop(0.2, rgb(99,161,255)),
		    color-stop(0.3, rgb(189,178,189)),
		    color-stop(0.4, rgb(85,194,154)),
		    color-stop(0.5, rgb(171,55,171)),
		    color-stop(0.6, rgb(94,183,242)),
		    color-stop(0.7, rgb(100,189,146)),
		    color-stop(0.8, rgb(114,235,33)),
		    color-stop(0.9, rgb(219,201,9))
		);
		background-image: -moz-linear-gradient(
		    center bottom,
		    rgb(255,0,234) 10%,
		    rgb(99,161,255) 20%,
		    rgb(189,178,189) 30%,
		    rgb(85,194,154) 40%,
		    rgb(171,55,171) 50%,
		    rgb(94,183,242) 60%,
		    rgb(100,189,146) 70%,
		    rgb(114,235,33) 80%,
		    rgb(219,201,9) 90%
		);
	}
	.overflow-scroll-test { position:relative; top:70px; width:50%; height:300px; margin:0 auto; padding:10px; border:2px solid #999; background:#fff; overflow:scroll; white-space:nowrap; z-index:9; }
	.header, .footer { position:fixed; width:100%; height:45px; padding-top:5px; text-align:center; z-index:10;
		background-image: -webkit-gradient(
		    linear,
		    left bottom,
		    left top,
		    color-stop(0.4, rgb(140,140,140)),
		    color-stop(0.92, rgb(227,227,227))
			);
		background-image: -moz-linear-gradient(
		    center bottom,
		    rgb(140,140,140) 40%,
		    rgb(227,227,227) 92%
		);
	}
	.header { top:0; }
	.footer { bottom:0; }
</style>
</head>
<body>
<!-- wrapper -->
<div class="wrapper">
	<div class="header">HEADER<br/>position:fixed</div>
	<div class="overflow-scroll-test">
		<p>
			overflow:scroll 가로 테스트입니다. overflow:scroll 가로 테스트입니다.  overflow:scroll 가로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. <br />
			overflow:scroll 세로 테스트입니다. <br />overflow:scroll 세로 테스트입니다. 
		</p>
	</div>
	<div class="footer">FOOTER<br/>position:fixed </div>
<!-- //wrapper -->
</div>
</body>
</html>
